<div fxLayoutAlign="center">
  <mat-card>

    <h3 translate>TITLE_REGISTRATION</h3>

    <div class="form-container">

      <mat-form-field appearance="outline">
        <mat-label translate>LABEL_EMAIL</mat-label>
        <input [formControl]="emailControl" type="text" matInput>
        <mat-error *ngIf="emailControl.invalid && emailControl.errors.required" translate>MANDATORY_EMAIL</mat-error>
        <mat-error *ngIf="emailControl.invalid && emailControl.errors.email" translate>INVALID_EMAIL</mat-error>
      </mat-form-field>

      <mat-form-field appearance="outline">
        <mat-label translate>LABEL_PASSWORD</mat-label>
        <input [formControl]="passwordControl" type="password" matInput>
        <mat-error *ngIf="passwordControl.invalid && passwordControl.errors.required" translate>MANDATORY_PASSWORD</mat-error>
        <mat-error
          *ngIf="passwordControl.invalid && (passwordControl.errors.minlength || passwordControl.errors.maxlength)" translate [translateParams]="{length: '5-20'}">INVALID_PASSWORD_LENGTH</mat-error>
      </mat-form-field>

      <mat-form-field appearance="outline">
        <mat-label translate>LABEL_PASSWORD_REPEAT</mat-label>
        <input [formControl]="repeatPasswordControl" type="password" matInput>
        <mat-error *ngIf="repeatPasswordControl.invalid && repeatPasswordControl.errors.required" translate>MANDATORY_PASSWORD_REPEAT</mat-error>
      </mat-form-field>

      <div class="security-container">

        <mat-form-field>
          <mat-label>{{'LABEL_SECURITY_QUESTION' | translate}}
            <i style="margin-left:10px;" class="fas fa-exclamation-circle"></i>
            <em style="margin-left:5px;" translate>CANNOT_BE_CHANGED_LATER</em>
          </mat-label>
          <mat-select [formControl]="securityQuestionControl" placeholder="" [(value)]="selected"
                      name="securityQuestion">
            <mat-option *ngFor="let question of securityQuestions" [value]="question.id">
              {{question.question}}
            </mat-option>
          </mat-select>
          <mat-error *ngIf="securityQuestionControl.invalid && securityQuestionControl.errors.required" translate>MANDATORY_SECURITY_QUESTION</mat-error>
        </mat-form-field>

        <mat-form-field appearance="outline">
          <input [formControl]="securityAnswerControl" type="text" matInput [placeholder]="'SECURITY_ANSWER_PLACEHOLDER' | translate">
          <mat-error *ngIf="securityAnswerControl.invalid && securityAnswerControl.errors.required" translate>MANDATORY_SECURITY_ANSWER</mat-error>
        </mat-form-field>
      </div>
    </div>

    <button mat-raised-button color="primary"
            style="margin-top:1px;"
            [disabled]="emailControl.invalid || passwordControl.invalid || repeatPasswordControl.invalid || securityQuestionControl.invalid || securityAnswerControl.invalid"
            (click)="save()">
      <i class="fas fa-user-plus fa-lg"></i>
      {{'BTN_REGISTER' | translate}}
    </button>

  </mat-card>
</div>
